import React, { useState } from 'react';
import { useNavigate, Outlet, useLocation } from "react-router-dom";
import { NavBar, TabBar } from 'antd-mobile';
import {
    AppOutline,
    MessageOutline,
    UnorderedListOutline,
    UserOutline,
    AddCircleOutline
} from 'antd-mobile-icons';
import '../App.css';


function LayoutPage() {
    const navigate = useNavigate();
    const location = useLocation();
    const [activeKey, setActiveKey] = useState(location.pathname);

    // 添加底部标签栏配置 
    const tabs = [
        {
            key: '/layout/home',
            title: '首页',
            icon: <AppOutline />
        },
        {
            key: '/layout/caochang',
            title: '操场',
            icon: <UnorderedListOutline />
        },

        {
            key: '/layout/xiaoxi',
            title: '消息',
            icon: <MessageOutline />
        },
        {
            key: '/layout/my',
            title: '我的',
            icon: <UserOutline />
        }
    ];

    const handleTabChange = (key) => {
        setActiveKey(key);
        navigate(key);
    };

    return (
        <div className="app-layout">
            
            {/* 路由出口，用于渲染子路由组件 */}
            <div className="outlet-container">
                <Outlet />
            </div>
            {/* 底部标签栏 */}
            <TabBar
                activeKey={activeKey}
                onChange={handleTabChange}
            >
                {tabs.map((tab) => (
                    <TabBar.Item
                        key={tab.key}
                        title={tab.title}
                        icon={tab.icon}
                    />
                ))}
            </TabBar>
        </div>
    );
}

export default LayoutPage;